<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        defaultExpandStatus
        :isScalingBtn="false"
        :hasQueryPermission="false"
        :formColumns="formItems"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <skus-table
        showPagination
        :tableHeight="480"
        :defaultMinWidth="100"
        :dataSource="TableInfo.list"
        :columns="TableInfo.columns"
        :loading="TableInfo.loading"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="pagination.total"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      >
        <el-tabs slot="content_context" v-model="tabInfo.value" @tab-click="handleChangeTabs">
          <el-tab-pane label="当前" :name="tabInfo.maps.Current" :disabled="TableInfo.loading" />
          <el-tab-pane label="历史" :name="tabInfo.maps.History" :disabled="TableInfo.loading" />
        </el-tabs>
      </skus-table>
    </el-card>
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import skusPage from '@/mixins/commodity/skusPage';
import { FORM_ITEMS, CURRENT_TABLE_COLUMNS, HISTORY_TABLE_COLUMNS } from './constants/list';
import { getInitFormData, TableInfo } from '@/utils/getUtils';
import { searchService, searchHistoryService } from '@/api/finance/salePriceManage/changePriceRecordQuery';
export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    SkusTable,
  },
  data () {
    return {
      formItems: FORM_ITEMS,
      formData: getInitFormData(FORM_ITEMS),
      TableInfo: new TableInfo({ columns: CURRENT_TABLE_COLUMNS }),
      pageSizes: [10, 100, 1000],
      tabInfo: {
        value: '1', // 当前
        maps: { Current: '1', History: '2' }
      }
    }
  },
  methods: {
    // 获取表格数据
    async getTableData () {
      const { skuNo, productUuids } = this.formData;
      if (!skuNo && productUuids.length === 0) {
        return this.$message.warning('SKU编码、商品名称至少输入一项');
      }
      const data = { ...this.formData, ...this.paginationParams }
      const searchRequest = this.tabInfo.value == this.tabInfo.maps.History ? searchHistoryService : searchService
      const res = await searchRequest(data, this.TableInfo.setLoading)
      if (res?.retData) {
        this.TableInfo.setList(res.retData?.results)
        this.setTotalNum(res.retData?.totalNum)
      } else {
        this.TableInfo.setList([])
      }
    },
    // 切换Tab
    handleChangeTabs () {
      if (this.tabInfo.value == this.tabInfo.maps.Current) {
        this.TableInfo.setColumns(CURRENT_TABLE_COLUMNS)
      }
      if (this.tabInfo.value == this.tabInfo.maps.History) {
        this.TableInfo.setColumns(HISTORY_TABLE_COLUMNS)
      }
      this.handleQueryForm()
    },
  }
}
</script>
